<template>
  <div class="localImg">
    <div class="feedback">
      <div v-for="(item ,index ) in item.imgs" class="room_img" :key="index">
        <img ref="imagesRef" :src="item" class="images" />
      </div>
      <div class="uploadBtn">
        <input
          ref="pathClear"
          class="fileImage"
          type="file"
          value="+"
          accept="image/*"
          @change="inputChange($event)"
        />
      </div>
    </div>
    <div class="clickImg">点击选择图片</div>
    <div class="submitUpload">
      <el-button size="small" type="success" @click="isClick && submitUpload()">
        <span class="btnTxt">上传到服务器</span>
      </el-button>
      <el-button size="small" type="warning" @click="clearUpload()">
        <span class="btnTxt">清空</span>
      </el-button>
    </div>
    <fireComponents ref="childName" :fatherImgSrc="fatherImgSrc"></fireComponents>
  </div>
</template>

<script>
import { method } from '../../assets/js/alert'
import fireComponents from '@/components/newComp/fireComponents'
export default {
  name: 'localImg',
  data () {
    return {
      item: {
        name: [],
        imgs: []
      },
      files: [],
      fatherImgSrc: '',
      isClick: true
    }
  },
  components: {
    fireComponents
  },
  created () {
    method()
  },
  methods: {
    inputChange (event) {
      var reader = new FileReader()
      var img1 = event.target.files[0]
      // 判断上传图片大小
      var size = img1.size / 1024 / 1024
      if (size > 5) {
        alert('最大上传5M')
        return false
      }
      var imgName = img1.name.substring(img1.name.lastIndexOf('.')).toLowerCase()
      var allExt = '.jpg|.png|.JPG|.PNG'
      if (allExt.indexOf(imgName + '|') === -1) {
        alert('请上传 jpg 或 png 格式图片')
        return false
      }
      reader.readAsDataURL(img1)
      if (this.item.imgs.length > 0) {
        alert('最多只能选择1张图片')
        return false
      }
      this.files.push(img1)
      var that = this
      reader.onloadend = function () {
        that.item.name.push(img1.name)
        that.item.imgs.push(reader.result)
      }
      if (this.item.imgs.length > 0) {
        if (this.item.name[0] === this.item.name[1]) {
          alert('上传图片不能相同')
        }
      }
    },
    submitUpload () {
      this.fatherImgSrc = this.item.imgs[0]
      var data = new FormData()
      var url = 'api/test.php'
      if (this.files.length > 0) {
        this.isClick = false
        this.timerName = setInterval(() => {
          this.$refs.childName.init()
          window.clearInterval(this.timerName)
          this.timerName = null
          this.isClick = true
        }, 600)
        for (var i = 0; i < this.files.length; i++) {
          data.append('upload_file' + i, this.files[i])
        }
        this.axios.post(url, data).then((res) => {
          if (res.data != null) {
            setTimeout(() => {
              this.item.name = []
              this.item.imgs = []
              this.files = []
              // 重置input file
              this.$refs.pathClear.value = ''
            }, 4000)
            console.log('ok')
          }
        }).catch((res) => {
          alert('请求失败')
        })
      } else {
        alert('请选择文件')
      }
    },
    clearUpload () {
      this.item.name = []
      this.item.imgs = []
      this.files = []
      // 重置input file
      this.$refs.pathClear.value = ''
    }
  }
}
</script>

<style scoped>
.localImg {
  height: 100%;
  width: 750px;
  background-color: #f5f5f5;
  position: relative;
  margin-top: 200px;
}
.feedback {
  display: flex;
  justify-content: center;
}
.fileImage {
  width: 228px;
  height: 228px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
.images {
  width: 228px;
  height: 228px;
}
.uploadBtn {
  background-image: url("../../assets/images/localMov/2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20% 20%;
  width: 228px;
  height: 228px;
  line-height: 228px;
  text-align: center;
  color: #818181;
  font-size: 0.7rem;
  background-color: #dbdbdb;
}
.submitUpload {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  /* position: relative;
  top: 80px; */
}
.btnTxt {
  font-size: 35px;
}
.clickImg {
  font-size: 30px;
  color: #0775fd;
  text-align: center;
  margin-top: 10px;
}
</style>
